<template name="uni-countdown">
	<view class="uni-countdown">
		<block v-if="time == 0">
		{{s}}秒
		</block>
		<block v-else>
		<text :class="time == 2 ? 'color' : ''">{{h}}</text> : 
		<text :class="time == 2 ? 'color' : ''">{{i}}</text> : 
		<text :class="time == 2 ? 'color' : ''">{{s}}</text>
		</block>
	</view>
</template>
<script>
	export default {
		name: "uni-countdown",
		props: {
			bgrColor: {
				type: String,
				default: "#FFFFFF"
			},
			borderColor: {
				type: String,
				default: "#000000"
			},
			fontColor: {
				type: String,
				value: "#000000"
			},
			splitorColor: {
				type: String,
				default: "#000000"
			},
			timer: {
                type: [String, Number],
                default: ''
			},
			type:{
                type: [String, Number],
                default: ''
			}
		},
		data() {
			return {
				time:0,
				setTime: null,
				h: '00',
				i: '00',
				s: '00',
				leftTime: 0
			}
		},
		created: function(e) {
			this.time = this.type;
			this.countDown(this,this.timer);
		},
		beforeDestroy() {
			clearInterval(this.setTime)
		},
		methods: {
			countDown: function(self,leftTime) {
				if(self.time == 0){
					if (leftTime > 0) {
						var seconds = parseInt(leftTime / 1000, 10);
						
					} else {
						var seconds = 0;
						uni.setStorageSync("sec",1)
					}
				}else{
					if (leftTime > 0) {
						var hours = parseInt(leftTime / 1000 / 60 / 60, 10);
						var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
						var seconds = parseInt(leftTime / 1000 % 60, 10);
					} else {
						var hours = 0,
							minutes = 0,
							seconds = 0;
					}
					if (hours < 10) {
						hours = '0' + hours;
					}
					if (minutes < 10) {
						minutes = '0' + minutes;
					}
					self.h = hours;
					self.i = minutes;
				}
				
				if (seconds < 10) {
					seconds = '0' + seconds;
				}
				self.s = seconds;
				if(leftTime > 0){
					setTimeout(function(){
						self.countDown(self,leftTime - 1000)
					},1000);
				}
				
			}
		}
	}
</script>
<style>
	.uni-countdown {
        display: flex;
		padding: 2upx 0;
		flex-wrap: nowrap;
		justify-content: center;
	}
	.color{
		height: 40upx;
		color: #FFFFFF;
		margin: 0 6upx;
		padding: 0 10upx;
		line-height: 40upx;
		background: #45526b;
	}

	.uni-countdown-splitor {
		width: auto !important;
		justify-content: center;
		line-height: 44upx;
		padding: 0 5upx;
	}

	.uni-countdown-numbers {
		line-height: 44upx;
		width: auto !important;
		padding: 0 10upx;
		justify-content: center;
		height: 44upx;
		border-radius: 8upx;
		margin: 0 5upx;
		border: 1px solid #000000;
		font-size: 22upx;
	}
</style>
